{% extends "layout.html" %}


{% block body %}

<div class="container">

                <div class="row" style="padding: 10px 10px 10px;">
                             <form  method=POST action="{{ url_for('level') }}">

          
                     <button type="submit" class="btn  col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;">Level</button>
            </form>
     
            <form method=POST action="{{ url_for('learnmode') }}" >

       
            <button type="submit" class= "btn  col-xs-3 col-sm-3 col-md-3 col-lg-3 " name="download" value=True style="padding: 2px 2px 2px;" >Learnmode</button>
     

            </form>

  

        	</div>

          <div class="row">
          <p  class="text-muted col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;"> stem_index: </p>    
       <p id="user_level" class="text-muted col-xs-3 col-sm-3 col-md-3 col-lg-3" style="padding: 2px 2px 2px;"> {{user_level}}</p>
    <p id="bag" >{{bag}}</p>       
          </div>

           
            <div class="row"  style="padding: 6px 6px 6px;"> 
              

                        <button   type="submit" class = " btn btn-info  col-xs-2 col-sm-2 col-md-2 col-lg-2"  name="previous" id ="previous" value=True >Prev</button>
             
                        <button   type="submit" class = "btn btn-info col-xs-2 col-sm-2 col-md-2 col-lg-2" name="next" id="next" value=True  >Next</button>

                       


    
                    

          </div> 

    <ul class="list-group" style="list-style-type:none">


 
        <li  class="list-group-item " id="li" style="border: 1px solid blue"> 
        <div style="padding: 10px 10px 10px;">
                      
                                  
                   <div class="row "  >
                          <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <p class="text-primary lead font-weight-bold "  preload="auto" id="word" style="zoom:120%;"></p>
                          </div> 
         
                   
                  <div class="float-right ">
                      <p class="text-muted col-xs-2 col-sm-2 col-md-2 col-lg-2 " id="user_level"></p>
                      </div>
                       </div> 

                      <div class="row">
                            <audio    controls="controls"  preload="auto" type="audio/mp3" class="wordMusic col-xs-8 col-sm-8 col-md-8 col-lg-8"></audio> 
                            </div>         
          </div> 
         <div style="padding: 10px 10px 10px;">
            <div class="row" >
             
                    <img class ="img-rounded img-responsive col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_a" >

                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="image_b" >
                 
          
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_c" >
                
                      <img class ="img-rounded img-responsive  col-xs-3 col-sm-3 col-md-3 col-lg-3" id="clipart_d"  >
                    </div>        
             </div> 

          <div style="padding: 10px 10px 10px;">
    
         
            <div class="row"  >
               <span class="text-muted" > [Tips:]</span>

                <span class="text-responsible" id="word_tip"></span>
              </div>  
             <div class="row"> 
              <span class="text-muted"> [Defintion:]</span>
              <span class="text-responsible" id="word_def"> </span>
            </div>
 
            <div class="row" style="padding: 10px 10px 10px;">
                <div class="btn btn-info col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a id="dict_mw" href="https://www.merriam-webster.com/dictionary/" > merriam-webster.com</a>
                  
                </div>

                <div class="btn btn-info col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <a id="dict_vo" href="https://www.vocabulary.com/dictionary/"> Vocabulary.com</a>
                  
                </div>
                <div class="btn btn-info col-xs-4 col-sm-4 col-md-4 col-lg-4">
                 <a id="dict_bi" href="https://cn.bing.com/dict/search?q="> cn.bing.com</a>
                  
                </div>

      </div> 
            
             </div>  
        </li class="list-group">

 

   

    </ul>



           <div  style="padding: 10px 10px 10px;">


              <div class="row">
                <button  class="btn disabled btn-block" >  Vocavola         </button>
             </div>

            </div>

</div>

<script  src="/static/js/stemmode.js" type=text/javascript >

</script>

{% endblock %}

